import creditImg from '@/assets/credit.png';
import pdf from '@/assets/pdf.png';
import { Col, Divider, Flex, Image, Modal, Row, Tooltip } from 'antd';
import { useCallback, useMemo } from 'react';
import { useIntl } from 'umi';

type Props = {
  visible: boolean;
  handleOk: () => void;
  data: any;
};
const FileModal: React.FC<Props> = ({ visible, handleOk, data }) => {
  const hanldeImage = (filename: string) => {
    const imageExtensions = /\.(jpg|jpeg|png|gif)$/i;
    return imageExtensions.test(filename);
  };
  const intl = useIntl();
  const commonComponents = useCallback((profileUrls: string[]) => {
    return (
      <Row gutter={[19, 15]}>
        {profileUrls.map((item: any) => {
          const list = item.split('/');
          const name = list[list.length - 1];
          const isImage = hanldeImage(item);
          return (
            <Col span={6} key={item}>
              <div
                style={{
                  textAlign: 'center',
                  border: '1px dashed #D9D9D9',
                  borderRadius: 4,
                  height: 94,
                  padding: '8px 7px',
                }}
              >
                {isImage ? (
                  <Image height={78} src={item} width="100%" />
                ) : (
                  <Flex
                    style={{ flexDirection: 'column', cursor: 'pointer', height: '100%' }}
                    justify="center"
                    align="center"
                    onClick={() => {
                      window.open(item);
                    }}
                  >
                    <Col style={{ cursor: 'pointer' }}>
                      <img src={pdf} width={30} height={33} />
                    </Col>
                    <Tooltip title={name}>
                      <Col
                        style={{
                          width: '100%',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          marginTop: 7,
                          color: '#000',
                        }}
                      >
                        {name}
                      </Col>
                    </Tooltip>
                  </Flex>
                )}
              </div>
            </Col>
          );
        })}
      </Row>
    );
  }, []);
  const renderCompnents = useMemo(() => {
    const { profileUrls = [], key, flag } = data;

    switch (key) {
      case 'idCardImg':
        return (
          <Flex gap={20}>
            {profileUrls?.map((item: string, index: number) => {
              return (
                <div key={item} style={{ flex: 1 }}>
                  <div style={{ marginBottom: 7, color: '#333' }}>
                    {intl.formatMessage({
                      id: index == 0 ? 'home.id_front_word' : 'home.id_back_word',
                    })}
                  </div>
                  <Image width={'100%'} style={{ borderRadius: '10px', height: 164 }} src={item} />
                </div>
              );
            })}
          </Flex>
        );
      case 'bankMonthlyStatement':
        return (
          <div>
            <div style={{ marginBottom: 10 }}>{intl.formatMessage({ id: 'home.bank_credit' })}</div>
            <div className="bank_credit" style={{ padding: '17px 0 10px 0', marginBottom: 15 }}>
              <div>
                <img src={creditImg} width={287} />
              </div>
              <div
                style={{
                  minWidth: 120,
                  padding: '7px 0',
                  marginTop: 7,
                  backgroundColor: '#dceaff',
                  color: '#0065fd',
                  borderRadius: 4,
                  display: 'inline-block',
                }}
              >
                {intl.formatMessage({
                  id: flag == 1 ? 'home.bank_credited' : 'home.no_bank_credited',
                })}
              </div>
            </div>
            {commonComponents(profileUrls)}
          </div>
        );
      case 'insuranceProof':
        return profileUrls.map((item: any, index: any) => {
          const { amount, content, urls } = item;

          return (
            // eslint-disable-next-line react/no-array-index-key
            <div key={index}>
              <Col style={{ fontSize: 16 }}>
                {intl.formatMessage({ id: 'home.insurance_detail' }, { num: index + 1 })}
              </Col>
              <Col
                style={{
                  backgroundColor: '#f5f6f8',
                  borderRadius: 4,
                  padding: '5px 9px',
                  margin: '12px 0 8px',
                  minWidth: 120,
                  display: 'inline-block',
                }}
              >
                ${amount}
              </Col>
              <Col
                style={{
                  backgroundColor: '#f5f6f8',
                  borderRadius: 4,
                  padding: '7px 23px 15px 9px',
                }}
              >
                {content}
              </Col>
              <Col style={{ marginTop: 9 }}>
                {commonComponents(urls?.split(',').filter((item: any) => item))}
              </Col>
              {index != profileUrls?.length - 1 ? (
                <Divider style={{ margin: '22px 0 12px' }} />
              ) : null}
            </div>
          );
        });
      default:
        return commonComponents(profileUrls);
    }
  }, [data, intl, commonComponents]);
  return (
    <Modal
      onOk={handleOk}
      width={624}
      styles={{
        content: {
          padding: '30px 40px 54px',
        },
      }}
      title={
        <div
          style={{
            color: '#333',
            fontSize: 24,
            lineHeight: '38px',
            fontWeight: 700,
            marginBottom: 15,
          }}
        >
          {data.name || intl.formatMessage({ id: 'user.check' })}
        </div>
      }
      destroyOnClose
      footer={null}
      onCancel={handleOk}
      open={visible}
    >
      {renderCompnents}
    </Modal>
  );
};
export default FileModal;
